<template>
  <el-button type="primary" @click="flag = !flag">切换组件</el-button>
  <!-- <keep-alive :include="['Form', 'Transfer']"> -->
  <!-- <keep-alive :include="['Form']"> -->
  <!-- <keep-alive :exclude="['Form']"> -->
  <!-- <keep-alive :max="10"> -->
  <!-- 只有一个子节点 故不支持v-show -->
  <keep-alive>
    <Form v-if="flag"></Form>
    <Transfer v-else></Transfer>
  </keep-alive>
  <!-- <keep-alive>
    <Form v-show"flag"></Form>
    <Transfer v-show"!flag"></Transfer>
  </keep-alive> -->
</template>

<script setup lang='ts'>
import Form from './components/Form.vue'
import Transfer from './components/Transfer.vue'
import { ref } from 'vue'

const flag = ref<boolean>(true)


  interface KeepAliveProps {
  /**
   * 如果指定，则只有与 `include` 名称
   * 匹配的组件才会被缓存。
   */
  include?: MatchPattern
  /**
   * 任何名称与 `exclude`
   * 匹配的组件都不会被缓存。
   */
  exclude?: MatchPattern
  /**
   * 最多可以缓存多少组件实例。
   */
  max?: number | string
}

type MatchPattern = string | RegExp | (string | RegExp)[]

</script>


<style scoped>

</style>